import React, { useState } from 'react'
import styles from './TaskInput.module.css'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faPlus } from '@fortawesome/free-solid-svg-icons'

const TaskInput = ({ addFunction }) => {
	const [text, setText] = useState('')
	return (
		<div className={styles.wrapper}>
			<div
				onClick={() => {
					addFunction(text)
					setText('')
				}}
				className={styles.add__button}
			>
				<FontAwesomeIcon icon={faPlus} />
			</div>
			<input
				className={styles.add__input}
				type='text'
				placeholder='Add a task'
				value={text}
				onChange={evt => setText(evt.target.value)}
			/>
		</div>
	)
}

export default TaskInput
